<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:insert="/common/header::head">
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">


    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/headers/}">
    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/offcanvas-navbar/}">



    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/headers.css}" rel="stylesheet">
    <link th:href="@{/css/offcanvas.css}" rel="stylesheet">



</head>
<body>
<!--导航头部-->
<div th:insert="/common/header::top(1)"></div>


<!--文章简略-->
<div class="my-3 p-3 bg-body rounded shadow-sm container list-group list-group-flush">
    <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
    <div class="d-flex text-muted pt-3" th:each="i:${#numbers.sequence(0,articles.size()-1)}">
        <a th:href="@{'/user/'+${articles[i].getUser().getId()}}"><img th:src="@{'/images/users/'+${articles[i].getUser().getPath()}}" width="64px" height="64px"></a>
        <div class="pb-3 mb-0 small lh-sm border-bottom w-100" >

                <div class="d-flex justify-content-between">
                    <a th:href="'/article/'+${articles[i].getId()}"><strong class="text-gray-dark" th:text="${articles[i].getTitle()}">Full Name</strong></a>
                    <a th:href="'/article/'+${articles[i].getId()}" th:text="${articles[i].getDate()}">Follow</a>
                </div>
                <a th:href="@{'/user/'+${articles[i].getUser().getId()}}"><span class="d-block" th:text="${'@'+articles[i].getUser().getUsername()}">@username</span></a>
        </div>
    </div>
</div>


<!--分页-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
<!--上一页按钮-->
        <li class="page-item">
            <a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a>
        </li>
<!--当前页面高亮-->
        <li th:each="i:${#numbers.sequence(1,totalPage)}" th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">页数</a>
        </li>
<!--下一页按钮  判断是否最后一页-->
        <li class="page-item">
            <a class="page-link" th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a>
        </li>
    </ul>
</div>





<div th:insert="/common/header::footer"></div>

<script>
    window.onload = function () {
        var mmm = document.querySelector(".mmm");
        mmm.addEventListener('click',function () {
            alert('已退出！');
        })
    }

</script>

</body>
</html>